<template>
    <div class="tpl-wrapper" :class="{ 'thin':thin, 'isTpl':isTpl }">
        <div 
            class="tpl-content" 
            :class="{ 'noPadding':noPadding }" 
            :style=" isTpl ? { width:'100%', height:'100%' } : { width:labelWidth + 'cm', height:realHeight + 'cm' }">
            <slot></slot>
        </div>
    </div>
</template>
<script setup>  
    import { ref, computed } from 'vue'; 
    const props = defineProps({
        noPadding:{ type:Boolean, default:false },
        thin:{ type:Boolean, default:false },
        labelWidth:{ type:Number },
        direction:{ type:String, default:'horizon' },
        isTpl:{ type:Boolean, default:true }
    });

    // A4 标准尺寸 21cm * 29.7cm 
    // 默认边距 上下2.54cm 左右3.18cm   实际内容区最大宽度为 16cm  
    const realHeight = computed(()=>{
        let val = props.direction === 'vertical' ? props.labelWidth * 1.5 : props.labelWidth * 2 / 3;
        return (val).toFixed(2);
    })
   
</script>
<style lang="scss">
    .tpl-wrapper {
        width:15cm;
        font-size:var(--12FontSize);
        position:relative;
        border-radius:8px;
        box-sizing:content-box;
        .tpl-content {
            padding:var(--mPadding);
            box-sizing:content-box;
            margin:0 auto;
            box-shadow: 0px 0px 0px 1px #e1e4ea, 0px 1px 3px #cdced3;
            border:1px solid #fff;
            border-radius:8px;
            cursor:pointer;
        }
       
        .tpl-content.noPadding {
            padding:0;
        }
    }
    .tpl-wrapper.isTpl {
        width:100%;
        height:100%;
        .tpl-content {
            margin:0;
            box-sizing:border-box;
        }
    }
    .tpl-wrapper:hover:not(.selected) {
        border-color:#849af0;
    }
    
   
    .flex-box {
        display:flex;
        flex-direction: column;
        height:100%;
        border-bottom:1px solid #000;
        .flex-row {
            display:flex;
            align-items: center;
            justify-content: center;
            border-top:1px solid #000;
            border-left:1px solid #000;
            border-right:1px solid #000;
        }
        .flex-row.noBorder {
            border:none;
        }
        .flex-row.hasBg {
            background:#335CFF;
            text-align:center;
            color:#fff;
        }
        .flex-row.topRadius {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .flex-row.bottomRadius {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
        .flex-row.s {
            flex:1;
        }
        .flex-row.m {
            flex:2;
        }
        .flex-row.l {
            flex:3;
        }
        .flex-row.h {
            flex:4;
        }
    }
    .flex-box.border {
        border:1px solid #000;
    }
    .flex-box.noBorder {
        border:none;
    }
    .flex-box.circleBg {
        background-image:url(../../../assets/circle-bg.png);
        background-size:contain;
        background-repeat:no-repeat;
        background-position:50% 60%;
    }
    .flex-box.hasRadius {
        border-radius:8px;
    }
    .flex-box-inline {
        display:flex;
        align-items: center;
        height:100%;
        width:100%;
        position:relative;
        &:after {
            content:'';
            position:absolute;
            left:30%;
            width:1px;
            height:100%;
            background:#000;
        }
    }
    .row-label {
        width:30%;
        padding-left:var(--sPadding);
        white-space:nowrap;
    }
    .row-value {
        width:70%;
        padding-left:var(--sPadding);
        white-space: nowrap;
    }
    .row-label.space {
        width:40%;
        text-align:right;
    }
    .row-value.space {
        width:60%;
        text-align:left;
    }

    .absolute-box {
        position:absolute;
        top:0;
        width:100%;
        left:0;
        height:100%;
    }
    .bg {
        background:#335CFF;
        text-align:center;
        color:#fff;
    }
    .top-radius {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .logo {
        display:inline-block;
        padding:4px 16px;
        color:#fff;
        background:#000;
    }
    .logo-img {
        height:4vh;
    }
    .circle-symbol {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:30vh;
        border-radius:50%;
        transform:translateY(-50%) scaleX(1.5);
        background:#335CFF;     
    }
    .circle-symbol.white {
        width:100%;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:30vh;
        border-radius:50%;
        transform:translateY(-60%) scaleX(1.5);
        background:#fff;     
    }
    // .qrcode-img img {
    //     width:80px;
    // }
    .code-img {
        text-align:center;
    }
    .qrcode {
        width:var(--qrCodeSize) !important;
        height:var(--qrCodeSize) !important;
    }
</style>